<template>
  <page-scroll :footer="false">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="container">
        <div class="assets">
          <div class="n">{{ $t("page.doc5") }}(USDT)</div>
          <!-- <div class="am">{{$store.state.userData.totalBalance}}</div> -->
          <div class="am">{{ income_info.totalAmount | Svalues }}</div>
          <div class="set btns">
            <!-- <button class="btn" @click="path_url('/wallet/recharge')">{{ $t('page.doc6') }}</button> -->
            <!-- <button class="btn" @click="path_url('/wallet/withdraw')">{{ $t('page.doc7') }}</button> -->
            <button class="btn" @click="path_url('/wallet/recharge')">
              <img src="../../assets/images/pi_1.png" alt="" />
              {{ $t("page3.doc73") }}
            </button>
            <button class="btn" @click="path_url('/wallet/withdraw')">
              <img src="../../assets/images/pi_2.png" alt="" />
              {{ $t("page3.doc74") }}
            </button>
            <button class="btn" @click="path_url('/wallet/tnsfer')">
              <img src="../../assets/images/pi_3.png" alt="" />
              {{ $t("page3.doc75") }}
            </button>
            <button class="btn" @click="path_url('/wallet/addressList')">
              <img src="../../assets/images/pi_4.png" alt="" />
              {{ $t("page4.doc61") }}
            </button>
          </div>
        </div>
<!--        <div class="record-title">{{ $t("page.doc8") }}</div>-->
        <div class="record_hdrecord_hd db" style="justify-content: flex-end">
          <div class="set" @click="activity_show = true">
            {{ activityTXT }}
          </div>
          <div class="set" @click="type_show = true">
            {{ typeTXT }}
          </div>
          <div class="set" @click="time_show = true">
            <span v-if="date == ''">{{ timeTXT }} </span>
            <span v-else>{{ date }}</span>
          </div>
        </div>

        <div class="empty db" v-show="emptyShow">
          <div class="flexs">
            <van-empty
              class="custom-image"
              :image="require('../../assets/images/none.png')"
              :description="$t('load.doc1')"
            />
          </div>
        </div>

        <van-pull-refresh
          v-model="refreshing"
          :success-text="$t('load.refreshed')"
          @refresh="onRefresh(0)"
          head-height="100"
          v-if="!emptyShow"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('load.no_more')"
            :loading-text="$t('load.loading')"
            @load="onLoad"
            :immediate-check="check"
          >
            <div style="margin-top: 0.24rem; margin-bottom: 1rem">
              <ul class="list">
                <li v-for="(item, k) in datalist" :key="k">
                  <div class="wrap bet">
                    <div class="name">
                      <div class="n">{{ item.type }}</div>
                      <div class="time">{{ item.date }}</div>
                    </div>
                    <div class="s">
                      {{ common.decal4(item.amount) }} {{ item.coinName }}
                      <div class="status">
                        {{ item.status }}
                      </div>
                    </div>
                  </div>

                  <div class="pp tar">
                    {{ item.rejectReason }}
                  </div>
                </li>
              </ul>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>

      <van-popup v-model="type_show" round position="bottom">
        <van-picker
          :title="$t('page.doc9')"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          item-height=".8rem"
          :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
        />
      </van-popup>
      <van-popup v-model="activity_show" round position="bottom">
        <van-picker
          :title="$t('page.doc9')"
          show-toolbar
          :columns="typecolumns"
          @confirm="onConfirm1"
          @cancel="activity_show = false"
          item-height=".8rem"
          :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
        />
      </van-popup>
      <!-- <van-calendar v-model="time_show" color="#F4345D"  type="range" :min-date="minDate" :max-date="maxDate"
                @confirm="onTimeConfirm" style="color:#000" /> -->

      <van-popup v-model="time_show" round position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title=""
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onTimeConfirm"
          item-height=".8rem"
          :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
          @cancel="time_show = !time_show"
        />
      </van-popup>
    </template>
  </page-scroll>
</template>

<script>
import { mapActions, mapMutations, mapGetters } from "vuex";

export default {
  data() {
    return {
      activity_show: false,
      title: this.$t("page4.doc31"),
      income_info: [],
      is_static: this.$store.state.is_assets,
      datalist: [],
      activityTXT: this.$t("page.doc206"),
      timeTXT: this.$t("page.doc10"),
      startTime: "",
      endTime: "",
      yearMonth: "",
      typeTXT: this.$route.query.name
        ? this.$route.query.name
        : this.$t("page.doc11"),
      type: this.$route.query.id ? [this.$route.query.id] : [],
      datatype: [],

      type_show: false,
      time_show: false,
      date: "",
      columns: [this.$t("page.doc11")],
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(),

      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
      ktx: 0,
      currentDate: new Date(2021, 0, 17),
      typecolumns: [],
      activitytype: [],
    };
  },
  mounted() {
    this.getIncome();
    this.gettype();
  },
  filters: {
    Svalues(value) {
      if (value) {
        return Number(value.toString().match(/^\d+(?:\.\d{0,2})?/));
      }
    },
  },
  methods: {
    ...mapMutations(["SET_ISASSETS"]),

    piChange(e) {},
    formatDate(date) {
      // let month = `${date.getMonth() + 1}` < 10 ? 0 + `${date.getMonth() + 1}` : `${date.getMonth() + 1}`
      // let getdate = `${date.getDate()}` < 10 ? 0 + `${date.getDate()}` : `${date.getDate()}`
      // return `${date.getFullYear()}-${month}-${getdate}`;

      let month =
        `${date.getMonth() + 1}` < 10
          ? 0 + `${date.getMonth() + 1}`
          : `${date.getMonth() + 1}`;
      let getdate =
        `${date.getDate()}` < 10
          ? 0 + `${date.getDate()}`
          : `${date.getDate()}`;
      return `${date.getFullYear()}${month}`;
    },
    onTimeConfirm(date) {
      this.time_show = false;
      this.yearMonth = `${this.formatDate(date)}`;

      this.getgo();
      // return

      // const [start, end] = date;
      // this.time_show = false;
      // this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      // this.startTime = `${this.formatDate(start)}`
      // this.endTime = `${this.formatDate(end)}`
      // this.getgo()
    },
    onConfirm(value, index) {
      this.type_show = false;
      if (index == 0) {
        this.type = [];
        this.typeTXT = this.$t("page.doc11");
        this.getgo();
        return;
      }
      this.type = [this.datatype[index - 1].code];
      this.typeTXT = this.datatype[index - 1].name;
      this.getgo();
    },
    onConfirm1(value, index) {
      this.activity_show = false;
      if (index == 0) {
        this.type = [];
        this.activityTXT = this.$t("page.doc206");
        this.getgo();
        return;
      }
      this.type = [this.activitytype[index - 1].code];
      this.activityTXT = value;
      this.getgo();
    },
    onCancel() {
      this.type_show = false;
    },
    gettype() {
      this.$post(this.URL.user.wallet_type, { coinId: 1 }).then((res) => {
        if (res.code == 0) {
          this.datatype = res.data;
          res.data.forEach((e) => {
            this.columns.push(e.name);
          });
        }
      });
      this.$post(this.URL.wallet.activitytype, {}).then((res) => {
        if (res.code == 0) {
          this.typecolumns = [this.$t("page.doc11")];
          this.activitytype = res.data;
          res.data.forEach((e) => {
            this.typecolumns.push(e.name);
          });
        }
      });
    },

    getgo() {
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.pageSize = 0;
      this.totalPage = "";
      this.finished = false;
      this.loading = true;
      this.datalist = [];
      this.emptyShow = false;
      this.onLoad();
    },

    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = [];
          this.refreshing = false;
        }
        this.getlist();
      }, 100);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },

    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }

      this.$post(this.URL.user.wallet_record, {
        types: this.type, //类型
        filter: "0", //筛选条件(0-全部, -1-支出, 1-收入)
        coinId: 1,
        startTime: this.startTime,
        endTime: this.endTime,
        yearMonth: this.yearMonth,
        page: this.pageSize,
        pageSize: 10,
        lastId: "",
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            return;
          }
          if (res.data.list.length == 0) {
            this.emptyShow = true;
          }
          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count;

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;
        }
      });
    },

    getAssetShow() {
      this.is_static = !this.$store.state.is_assets;
      this.SET_ISASSETS(!this.$store.state.is_assets);
    },
    getIncome() {
      this.$post(this.URL.income.assets, {}).then((res) => {
        if (res.code == 0) {
          this.income_info = res.data;
          this.ktx =
            this.income_info.totalBalance - this.income_info.pendingAmount;
        }
      });
    },

    path_url(url) {
      localStorage.removeItem("coinId");
      localStorage.removeItem("chainName");
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.assets {
  //padding: 0.36rem;
  text-align: center;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--COcolor3);
  text-shadow: 0rem 0.1rem 0.2rem rgba(10, 10, 10, 0.1);
  background: linear-gradient(180deg, #f8f8e0 0%, #f5b975 100%);
  border-radius: 0.2rem;
  margin-top: 0.22rem;
  //padding-bottom: 0.24rem;
  overflow: hidden;
  padding-top: 0.56rem;
  margin-bottom: 0.48rem;

  .n {
    line-height: 0.4rem;
    margin-bottom: 0.44rem;
    color: #000000;
  }

  .am {
    font-size: 0.72rem;
    color: #000000;
    line-height: 0.73rem;
    font-weight: bold;
  }
}

.record-title {
  margin: 0.32rem 0;
  height: 0.8rem;
  background: url("../../assets/images/public/titlebg.png") center no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.28rem;
}

.record_hdrecord_hd {
  display: flex;
  justify-content: space-between !important;

  .flex1 {
    font-size: 0.32rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 0.42rem;
    white-space: nowrap;
  }

  .set {
    background: url("../../assets/images/ico_la.png") no-repeat right center;
    background-size: 0.16rem auto;
    padding-right: 0.3rem;
    font-size: 0.24rem;
    word-break: break-all;
  }
}

.list {
  li {
    padding: 0.3rem 0.32rem;
    background: var(--CObackgroundLinear2);
    margin-bottom: 0.24rem;
    border-radius: 0.2rem;
    font-size: 0.28rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: var(--COcolor3);

    .name {
      width: 50%;
    }

    .s {
      font-size: 0.32rem;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #F2C409;
      width: 40%;
      margin-left: 0.24rem;
      text-align: right;
    }

    .reduce {
      font-size: 0.32rem;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: var(--COcolor3);
    }

    .time,
    .status {
      margin-top: 0.18rem;
      font-size: 0.24rem;
      color: var(--COcolor1);
    }

    .time {
      text-align: left;
    }

    .status {
      text-align: right;
    }
  }
}

.btns {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(48, 43, 48, 0.9);
  width: 100% !important;
  padding-bottom: 0.3rem;
  padding-top: 0.16rem;
  margin-top: 0.66rem;

  .btn {
    width: 100% !important;
    margin: 0 !important;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    //styleName: test01.topone99999.info/Sora/Regular 12;
    font-family: var(--fontfamilyFont1);
    font-size: 0.24rem;
    color: #fff;
  }
}
</style>
